<template>
	<view class="mine">
		<view style="position: relative;">
			<image src="/static/bg.png" class="mine-bg"></image>
			<view class="avatar-con" @click="goUser">
				<u-avatar :src="userInfo.avatar" size="124rpx"></u-avatar>
				<view style="margin-left: 20rpx;">
					<view class="avatar-title">{{userInfo.nickname}}</view>
					<view class="avatar-desc">下午好</view>
				</view>
				<image src="/static/mineb.png" style="margin-left: auto;width: 40rpx;height: 40rpx;"></image>
			</view>
		</view>
		<view class="mine-tab">
			<view class="tab-item">
				<view>费用总计</view>
				<view class="item-title">￥<text style="font-size: 42rpx;">{{numData.totalPrice}}</text></view>
			</view>
			<view class="tab-item">
				<view>订单总计</view>
				<view class="item-title"><text style="font-size: 42rpx;">{{numData.totalNum}}</text></view>
			</view>
			<view class="tab-item">
				<view>使用时长</view>
				<view class="item-title"><text style="font-size: 42rpx;">{{numData.totalTime}}</text>分钟</view>
			</view>
			<!-- <view class="tab-item" style="border: none;">
				<view>总耗电</view>
				<view class="item-title"><text style="font-size: 42rpx;">{{numData.totalPostage}}</text>度</view>
			</view> -->
		</view>
		<view class="mine-list">
			<view class="list-item" @click="goPath('/pages/order/order')">
				<view class="list-img">
					<image src="/static/ma.png" style="width: 60rpx;height: 60rpx;"></image>
				</view>
				<view class="">我的订单</view>
				<view class="list-desc">{{numData.totalNum}}笔</view>
				<view style="margin-top: 6rpx;margin-left: 4rpx;">
					<u-icon name="arrow-right" color="#999" size="28rpx"></u-icon>
				</view>

			</view>
			<u-line color="#999"></u-line>
			<!-- <view class="list-item" @click="goPath('/pages/money/money')">
				<view class="list-img">
					<image src="/static/mb.png" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view class="">资金流水</view>
				<view class="list-desc">62笔</view>
				<view style="margin-top: 6rpx;margin-left: 4rpx;">
					<u-icon name="arrow-right" color="#999" size="28rpx"></u-icon>
				</view>

			</view>
			<u-line color="#999"></u-line>
			<view class="list-item" @click="goPath('/pages/moneyTj/moneyTj')">
				<view class="list-img">
					<image src="/static/mc.png" style="width: 45rpx;height: 45rpx;"></image>
				</view>
				<view class="">资金统计</view>
				<view style="margin-top: 6rpx;margin-left: auto;">
					<u-icon name="arrow-right" color="#999" size="28rpx"></u-icon>
				</view>

			</view>
			<u-line color="#999"></u-line> -->
			<view class="list-item">
				<view class="list-img">
					<image src="/static/md.png" style="width: 45rpx;height: 45rpx;"></image>
				</view>
				<view class="">版本信息</view>
				<view class="list-desc">V{{appInfo.version}}</view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		infoApi,
		getDataNum
	} from "@/api"
	export default {
		data() {
			return {
				src: "",
				userInfo: {},
				numData: {},
				appInfo: {},
			}
		},
		onLoad() {
			this.appInfo = wx.getAccountInfoSync().miniProgram
			console.log(this.appInfo);
		},
		onShow() {
			this.getinfo()
			this.getNum()
		},
		methods: {
			async getinfo() {
				const res = await getDataNum()
				this.numData = res.data
			},
			async getNum() {
				const res = await infoApi()
				this.userInfo = res.data
				uni.setStorageSync('qrurl', res.data.wxProfile.headimgurl)
			},
			goUser() {
				const item = {
					nickname: this.userInfo.nickname,
					avatar: this.userInfo.avatar,
					phone: this.userInfo.phone,
				}
				uni.navigateTo({
					url: '/pages/userInfo/userInfo?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.mine-bg {
		width: 750rpx;
		height: 400rpx;
	}

	.avatar-con {
		position: absolute;
		left: 32px;
		right: 30rpx;
		top: 160rpx;
		display: flex;
		align-items: center;
	}

	.avatar-title {
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.avatar-desc {
		font-size: 26rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
	}

	.mine-tab {
		position: relative;
		width: 710rpx;
		height: 200rpx;
		border-radius: 29rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		margin-top: -80rpx;
	}

	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		color: #999999;
		font-size: 31rpx;
		border-right: 1px solid #999999;
	}

	.item-title {
		font-weight: 600;
		font-size: 31rpx;
		color: #000;
		margin-top: 10rpx;

	}

	.mine-list {
		width: 710rpx;
		border-radius: 29rpx;
		background: #FFFFFF;
		margin-top: 30rpx;
		padding: 0 31rpx;
	}

	.list-item {
		height: 120rpx;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 31rpx;
		color: #333;
	}

	.list-img {
		height: 60rpx;
		width: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
	}

	.list-desc {
		margin-left: auto;
		color: #999;
		font-size: 27rpx;
	}
</style>